<template>
  <div class="login">
    <vue-particles color="#64f4e5"
                   :particleOpacity="0.3"
                   :particlesNumber="50"
                   shapeType="polygon"
                   :particleSize="30"
                   linesColor="#64f4e5"
                   :linesWidth="1"
                   :lineLinked="false"
                   :lineOpacity="0.4"
                   :linesDistance="150"
                   :moveSpeed="10"
                   :hoverEffect="true"
                   hoverMode="false"
                   :clickEffect="true"
                   clickMode="push"
                   class="lizi"></vue-particles>
    <el-form ref="form"
             :model="form"
             :rules="rules"
             class="form">
      <el-form-item>
        <img :src="avatarUrl"
             class="login-img">
      </el-form-item>
      <el-form-item prop="username">
        <el-input v-model="form.username"
                  placeholder="用户名"
                  prefix-icon="el-icon-phone-outline"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="form.password"
                  placeholder="密码"
                  type="password"
                  @keydown.enter.native="sign('form')"
                  prefix-icon="el-icon-view"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   class="btn"
                   @click="sign('form')">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  //引入头像
  import avatarUrl from '@/assets/images/cai1.gif'
  //引入登入请求
  import { login } from '@/api/'
  export default {
    data() {

      return {
        avatarUrl,
        form: {
          username: "",
          password: ""
        },
        rules: {
          username: [
            { required: true, message: "请输入用户名", trigger: "blur" }
          ],
          password: [{ required: true, message: "请输入密码", trigger: "blur" }]
        }
      };
    },
    methods: {
      sign(formName) {
        let _this = this;
        console.log(this.username)
        this.$refs[formName].validate(valid => {
          if (valid) {
            //打开loading动画
            const loading = _this.$loading({
              lock: true,
              text: '正在登入..',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            });
            //表示验证通过
            //传递用户名和密码到服务    
            login(_this.form)
              .then(res => {
                console.log(res)
                if (res.data.state) {
                  //关闭登入动画
                  loading.close();
                  //登入成功之后要做的事情
                  //1.保存token到localstorage
                  //2.保存昵称到localstorage
                  localStorage.setItem("token", res.data.token);
                  localStorage.setItem("nickname", res.data.userInfo.nickname);
                  //初次登入的时候设置nickname
                  _this.$store.commit('setNickname',res.data.userInfo.nickname)
                  _this.$router.push("/")
                } else {
                  this.$alert('账户或者密码错误', '错误', {
                    confirmButtonText: '返回',
                    callback: action => {
                      loading.close();
                    }
                  });
                }
              })
          } else {
          }
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
  .login {
    width: 100%;
    height: 100%;
    background: #2f4050;
    position: fixed;
    .form {
      width: 400px;
      padding: 0px 40px 15px 40px;
      margin: 200px auto;
      background: #fff;
      text-align: center;
      .login-img {
        position: relative;
        left: 10%;
        width: 120px;
        height: 120px;
        margin-left: -60px;
        margin-top: -60px;
        box-sizing: border-box;
        border-radius: 50%;
        border: 10px solid #fff;
        box-shadow: 0 1px 5px #ccc;
        overflow: hidden;
      }
      .btn {
        width: 100%;
      }
    }
  }
  .lizi {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .el-form-item__content {
    text-align: center;
  }
</style>
